<template>
    <div class="w-[800px] space-y-5 select-none">
        <div class="flex space-x-2" v-if="!isadd">
            <div class="flex-1">
                <ypinput v-model="mobile" placeholder="输入手机号码"></ypinput>
            </div>
            <div>
                <button type="button" class="btn btn-chen" @click.stop="find_member">查询</button>
            </div>
            <div>
                <button type="button" class="btn btn-hong" @click.stop="isadd=1">增加</button>
            </div>
        </div>

        <div v-else>

            <div class=" bg-white text-sm">
              <div class="space-y-3 p-2">
                  <div class="flex items-center">
                      <div class="w-24 text-right pr-5">姓名</div>
                      <div class="flex-1">
                          <ypinput v-model="formData.truename" placeholder="请输入名称"></ypinput>
                      </div>
                  </div>
                  <div class="flex items-center">
                      <div class="w-24 text-right pr-5">性别</div>
                      <div class="flex-1 flex space-x-3">
                        <ypradio value="1" v-model="formData.sex" title="男"></ypradio>
                        <ypradio value="2" v-model="formData.sex" title="女"></ypradio>
                        <ypradio value="3" v-model="formData.sex" title="保密"></ypradio>
                      </div>
                  </div>
                  <div class="flex items-center">
                      <div class="w-24 text-right pr-5">手机号</div>
                      <div class="flex-1">
                          <ypinput v-model="formData.mobile" placeholder="请输入手机号"></ypinput>
                      </div>
                  </div>
                  <div class="flex items-center">
                      <div class="w-24 text-right pr-5">来源</div>
                      <div class="flex-1">
                          <ypinput v-model="formData.source" placeholder="客户从哪个渠道来的"></ypinput>
                      </div>
                  </div>

                  <div class="flex items-center">
                      <div class="w-24 text-right pr-5">描述</div>
                      <div class="flex-1">
                          <yptextarea v-model="formData.intro" placeholder="请输入描述"></yptextarea>
                      </div>
                  </div>

              </div>
              <div class="flex justify-center py-2 space-x-2 mt-5">
                  <button class="btn btn-hong" type="button" @click="save">
                      提交
                  </button>
                  <button class="btn" type="button" @click="isadd=0">
                      返回
                  </button>
              </div>
            </div>
        </div>


        <template v-if="member">
            <div class="flex justify-center space-x-3 text-base bg-lan-300 text-white py-3 rounded" @click.stop="choose_member">
                <div class="font-bold">{{ member.truename }}</div>
                <div>{{ member.mobile }}</div>
            </div>
        </template>
    </div>
</template>

<script setup>
    import {getData,postData,confirms,alter} from "@/api/data"
    import {ref,reactive,watch,onMounted} from "vue"
    const emits=defineEmits(['chooseMember'])
    const isadd=ref(0)
    const mobile=ref('')
    const member=ref(null)
    const find_member=async()=>{
        if(!mobile.value){
            alter({ type: 'alter-error', text: '请输入手机号码'})
            return
        }
        const resp= await getData('member/read',{mobile:mobile.value})
        if(resp.code==1){
            member.value=resp.data
        }
    }
    const choose_member=()=>{
        emits('chooseMember',member.value)
    }

    const formData=reactive({})
    const save=async()=>{
        const resp=await postData("member/save",formData)
        if(resp.code==1){
            alter({type:'alter-success',text:resp.msg})
            member.value=resp.data
            isadd.value=0
        }
    }



</script>